<template>  
  <q-layout-drawer v-model="drawer.open" :width="250">    
    <q-toolbar color="primary" class="row flex-center">
      <img alt="Paprika" src="statics/logo/banner1-150X40.png">
    </q-toolbar>

    <q-list no-border>
      <q-list-header>豆瓣营销</q-list-header>
      <q-item to="/movie" v-if="hasMenu(0)">
        <q-item-side icon="mdi-movie" color="primary" />
        <q-item-main>
          <q-item-tile label>近期热映</q-item-tile>
        </q-item-main>
      </q-item>

      <q-item to="/event" v-if="hasMenu(1)">
        <q-item-side icon="mdi-gamepad-variant" color="primary" />
        <q-item-main label="观影活动" />
      </q-item>

      <q-item to="/user" v-if="hasMenu(2)">
        <q-item-side icon="mdi-account-group" color="primary" />
        <q-item-main label="用户管理" />
      </q-item>

      <q-item to="/review/list" v-if="hasMenu(3)">
        <q-item-side icon="mdi-file" color="primary" />
        <q-item-main label="优质影评" />
      </q-item>

      <q-item to="/author" v-if="hasMenu(4)">
        <q-item-side icon="mdi-ticket-account" color="primary" />
        <q-item-main label="约稿作者" />
      </q-item>

      <q-item to="/project" v-if="hasMenu(5)">
        <q-item-side icon="assignment" color="primary" />
        <q-item-main label="约稿项目" />
      </q-item>

      <q-item to="/offical/accounts" v-if="hasMenu(6)">
        <q-item-side icon="mdi-wechat" color="primary" />
        <q-item-main label="公众账号" />
      </q-item>

      <q-item to="/offical/articals" v-if="hasMenu(7)">
        <q-item-side icon="mdi-wechat" color="primary" />
        <q-item-main label="公众文章" />
      </q-item>

      <q-item to="/douyin/videos" v-if="hasMenu(8)">
        <q-item-side icon="mdi-music-circle" color="primary" />
        <q-item-main label="抖音" />
      </q-item>



      <template v-if="hasMenu(9)">
      <q-item-separator />
      <q-list-header>票务系统</q-list-header>
      <q-item to="/ticket">
        <q-item-side icon="search" color="primary" />
        <q-item-main>
          <q-item-tile label>订单查询</q-item-tile>
        </q-item-main>
      </q-item>
      </template>

      <template v-if="hasMenu(10)">
        <q-item-separator />
        <q-list-header>PLUS小程序</q-list-header>
        <q-item to="/plus/topic/ticket">
          <q-item-side icon="cached" color="primary" />
          <q-item-main>
            <q-item-tile label>转票管理</q-item-tile>
          </q-item-main>
        </q-item>
        <q-item to="/plus/topic/post">
          <q-item-side icon="assignment" color="primary" />
          <q-item-main>
            <q-item-tile label>发帖管理</q-item-tile>
          </q-item-main>
        </q-item>
        <q-item to="/plus/topic/comment">
          <q-item-side icon="mdi-message-bulleted" color="primary" />
          <q-item-main>
            <q-item-tile label>评论管理</q-item-tile>
          </q-item-main>
        </q-item>
        <q-item to="/plus/journal">
          <q-item-side icon="mdi-file" color="primary" />
          <q-item-main>
            <q-item-tile label>影迹管理</q-item-tile>
          </q-item-main>
        </q-item>
      </template>


      <q-item @click.native="gotoVerify()" v-if="isWx">
        <q-item-side icon="mdi-qrcode-scan" color="primary" />
        <q-item-main>
          <q-item-tile label>票码核销</q-item-tile>
        </q-item-main>
      </q-item>

      <q-item-separator />
      <q-list-header>常用工具</q-list-header>
      <q-item to="/sms-code">
        <q-item-side icon="mdi-message-bulleted" color="primary" />
        <q-item-main>
          <q-item-tile label>短信工具</q-item-tile>
        </q-item-main>
      </q-item>
<!--
      <q-item-separator />
      <q-list-header>豆油工具</q-list-header>
      <q-item to="/doumail-code">
        <q-item-side icon="mail" color="primary" />
        <q-item-main>
          <q-item-tile label>票码豆油</q-item-tile>
        </q-item-main>
      </q-item>
-->

      <template v-if="account">
        <q-item-separator />
        <q-list-header>其他功能</q-list-header>
        <q-item to="/tool">
          <q-item-side icon="mdi-toolbox" color="primary" />
          <q-item-main>
            <q-item-tile label>实用工具</q-item-tile>
          </q-item-main>
        </q-item>
<!--        
        <q-item to="/faq">
          <q-item-side icon="mdi-file-document" color="primary" />
          <q-item-main>
            <q-item-tile label>使用说明</q-item-tile>
          </q-item-main>
        </q-item>
-->
        <q-item to="/accounts" v-if="isAdmin">
          <q-item-side icon="mdi-account-location" color="primary" />
          <q-item-main>
            <q-item-tile label>账号管理</q-item-tile>
          </q-item-main>
        </q-item>
        <q-item to="/setting">
          <q-item-side icon="mdi-settings" color="primary" />
          <q-item-main>
            <q-item-tile label><b class="text-primary">{{account.name}}</b>的设置</q-item-tile>
          </q-item-main>
        </q-item>
        <q-item to="/login">
          <q-item-side icon="mdi-logout" color="primary" />
          <q-item-main label="退出登录" />
        </q-item>
      </template>
    </q-list>
  </q-layout-drawer>
</template>

<script>

export default {
  name: 'MySide',
  data() {
    return {
      account: this.$api.account.localAccount(),
      drawer: this.$api.ui.drawer,
      isAdmin: this.$api.account.isAdmin(),
      isAuthor: this.$api.account.isAuthor(),
      isWx: this.$api.wx.isWx()
    }
  },
  methods: {
    gotoVerify() {
      //alert("OK");
      this.$api.wx.verifyTicket();
    },
    hasMenu(mid) {
      return this.$api.account.hasMenu(mid);
    }
  }
}
</script>
